I was working on a Js project that takes notes through a textarea using a button with a click event. I have stored the value from the text area in localstorage in "notes" key. So all i did was that i parsed it pushed the value from txtarea and then stringified it and further parsed it for an html change but now when i apply a forach loop on the PARSED form of notes it shows error - cannot read the porps of null reading foreach.

console.log("Welcome To MagicNotes");

// if users adds a note add it to the local storage
let addbtn = document.getElementById("addbtn");
// let notes = document.getElementById('notes')

// add a eventlistener -- click
addbtn.addEventListener("click", function (e) {

  //firstly we get/define the values
  let addtxt = document.getElementById("addtxt"); //get the textarea by its id
  let notes = localStorage.getItem("notes"); //get a notes array in the local storage

  // here comes the operation part -->

  // do nothing if value is null
  if (notes == null) {
    notesObj = [];

    // but parse if finds a string
  } else {
    notesObj = JSON.parse(notes); //use notesObj to store obj values of "notes"
     //JSON.parse is used to convert a text to object
  }
  // now update the value in that obj
  notesObj.push(addtxt.value);

  localStorage.setItem("notes", JSON.stringify(notesObj)); //now stringify notesObj and use it in local storage
  addtxt.value = ""; //to clear the txtarea after adding a note
  console.log(notesObj);
  showNotes();
  
});

function showNotes() {
  let notes = localStorage.getItem("notes");
  if (notes = null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }
  let html = "";

  notesObj.forEach (function (element, index) {
    html += `
   <div id="notes" class="noteCard my-2 mx-2 card">
   <div class="container my-1">
    <div class="card" style="width: 100%;">
        <div class="card-body">
          <h5 class="card-title">Note ${index + 1}</h5>
          <p class="card-text">${element}</p>
          <button href="#" class="btn btn-warning">Delete</button>
        </div>
      </div>
   </div>
   `;
  });
  let notesElm = document.getElementById("notes");
  if (notes.length == 0) {
    notesElm.innerHTML = html;
  }
}